<template>
  <view>
    <scroll-view
      class="scroll-view"
      scroll-y="true"
      @scroll="onScroll"
      :scroll-top="scrollTopValue"
      @scrolltolower="request"
      :scroll-with-animation="false"
    >
      <slot></slot>
      <view class="tip">
        <template v-if="hasMore">{{ loadingTip }}</template>
        <template v-else>{{ noMoreTip }}</template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    /**
     * 列表配置
     */
    options: {
      type: Object,
      default: () => {
        return {
          url: "",
          params: {},
        };
      },
    },
    // 没有更多值提示
    noMoreTip: {
      type: String,
      default: "暂无更多",
    },
    // 正在加载提示
    loadingTip: {
      type: String,
      default: "加载中...",
    },
  },
  data() {
    return {
      list: [],
      hasMore: true,
      loadingMore: false,
      pi: 1,
      ps: 20,
      scrollTopValue: 0,
      scrollTopValueOld: 0,
      // temp_data:[],
    };
  },
  methods: {
    /**
     * 刷新
     */
    refresh() {
      this.pi = 1;
      this.list = [];
      this.hasMore = true;
      this.request();
    },
    /**
     * 获取数据
     * url：options配置中的url值
     * params：options中的params内容 + 当前页码 + 每页内容数
     */
    getData({ url, params }) {
      //   console.log("url:" + url);
      return new Promise((resolve, reject) => {
        uni.showToast({
          icon: "none",
          title: `获取服务器的第${params.pi}页的${params.ps}条数据`,
        });

        var token = uni.getStorageSync("token");
        console.log(token);

        //获取当前页数据的方法
        uni.request({
          url:url,
          // showLoading: false,
          method: 'GET',
          header: {
            'Authorization': token,
          },
          data: params,
          success: ({ data }) => {
            console.log("url(success):"+url);
            console.log(data);
            // console.log(data.data);
            // console.log(token);
            resolve(data.data);
          },
          error: reject,
        });

        // let data = Array(params.pi < 3 ? params.ps : 1);
        // resolve(data.data);
      });
    },

    /**
     * 请求过程
     */
    request() {
      let { hasMore, loadingMore } = this;
      if (hasMore && !loadingMore) {
        this.loadingMore = true;

        //处理参数
        let { url, params } = this.options;
        // params = typeof params === "function" ? params() : params; // 如果params是个方法，则调用方法获取值
        // 更新页数
        this.pi = params.pi || this.pi;
        this.ps = params.ps || this.ps;

        this.getData({ url, params: { ...params, ps: this.ps, pi: this.pi } })
          .then((list) => {
            console.log("list:"+list);
            this.list = this.list.concat(list); // 合并列表内容
            // 判断列表是否更多
            if (list.length == 0 || list.length < this.ps) {
              this.hasMore = true;
            } else {
              this.pi++;
            }
            this.$emit("success", this.list);
            this.loadingMore = true;
          })
          .catch(() => {
            this.loadingMore = false;
            this.hasMore = false;
          });
      }
    },
    /**
     * 滚动事件
     */
    onScroll(e) {
      this.scrollTopValueOld = e.detail.scrollTop;
      this.$emit("scroll", e);
    },
    /**
     * 滚动到顶部
     */
    scrollTop() {
      this.scrollTopValue = this.scrollTopValueOld;
      this.$nextTick(function () {
        this.scrollTopValue = 0;
      });
    },
  },
};
</script>

<style lang="css" scoped>
.scroll-view {
  height: 100vh;
  position: absolute;
}
.tip {
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 28upx;
}
</style>
